<template>
  <div class="bigbox">
   <div class="liftbox">
    <div class="zidian"> <span>{{ $store.state.row.name }}-字典列表</span>
      <span @click="$router.back()"><button size="mini" round class="buttons" type="primary" icon="el-icon-arrow-left"
      >返回</button>
    </span></div>
      <div class="inputs">
        <!-- <img src="" alt="" srcset=""> -->
        <el-input
          size="mini"
          placeholder="请输入字典名称"
          suffix-icon="el-icon-search"
          v-model="inputs"
          @keyup.enter.native="searchs"
        >
        </el-input>
      </div>
      <div class="lifttable">
        <template>
          <el-table
            :data="tableDatas"
            border
            highlight-current-row
            :header-cell-style="{background:'#f5f5f5','text-align':'center'}"
            @current-change="handleCurrentChange"
            style="width: 100%">
            <el-table-column
              prop="value"
              label="字典值">
            </el-table-column>
            <el-table-column
              prop="name"
              label="字典名称">
            </el-table-column>
          </el-table>
        </template>
      </div>
   </div>
   <div class="rightbox">
    <div class="shuxing">{{ row.name }}-属性列表</div>
    <div class="zhong">
      <div>
        <span class="span">
        <el-input
            size="mini"
            placeholder="请输入属性名称"
            suffix-icon="el-icon-search"
            v-model="input"
            @keyup.enter.native="search"
          >
          </el-input>
      </span>
      </div>
      <div>
        <span> <button class="button new" type="primary" @click="dialogVisible=true">新增</button></span>
      <span> <button class="button" @click="shangyi">上移</button></span>
      <span> <button class="button" @click="xiayi">下移</button></span>
      </div>
     </div>
    <div style="height: 88%;">
      <template>
        <el-table
          :data="tableData"
          highlight-current-row
        @current-change="handleCurrent"
        border
        height="calc(100% - 1px)"
        :header-cell-style="{background:'#f5f5f5','text-align':'center'}"
          style="width: 100%">
          <el-table-column
            prop="code"
            label="属性编码"
            width="180">
          </el-table-column>
          <el-table-column
            prop="value"
            label="属性值"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="属性名称">
          </el-table-column>
          <el-table-column
            prop="explain"
            label="属性描述">
          </el-table-column>
          <el-table-column label="操作"  align="center">
            <template #default="{row}">
              <span @click="putzidian(row)">
                <i
                  class="el-icon-edit"
                  style="color: skyblue; "
                ></i
              ></span>
              <span @click="delzidian(row)">
                <i
                  class="el-icon-delete"
                  style="color: red; margin-left: 30px;"
                ></i
              ></span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
   </div>
   <div>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        >
        <div>
          <el-form :model="form" :rules="rules" ref="reference" label-width="100px">
            <el-form-item label="属性编码：" prop="attrCode">
              <el-input v-model="form.attrCode"></el-input>
            </el-form-item>
            <el-form-item label="属性名称：" prop="attrName">
              <el-input v-model="form.attrName"></el-input>
            </el-form-item>
            <el-form-item label="属性值：" prop="attrValue">
              <el-input v-model="form.attrValue"></el-input>
            </el-form-item>
            <el-form-item label="属性描述：">
              <el-input type="textarea" :rows="4" v-model="form.attrExplain"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="colose">取 消</el-button>
          <el-button type="primary" @click="sure">确 定</el-button>
        </span>
      </el-dialog>
   </div>
  </div>
</template>
<script>
import { getzidianlistapi, getshuxinglistapi, postzidianapi, putzidianapi, delzidianapi, getshangyiapi, getxiayiapi } from '../../api/routertable.js'
export default {
  name: 'DictionaryIndex',
  data () {
    return {
      inputs: '',
      val: '',
      input: '',
      tableData: [],
      tableDatas: [],
      row: {},
      dialogVisible: false,
      form: {},
      rules: {
        attrCode: [
          { required: true, message: '属性编码必填', trigger: 'blur' }
        ],
        attrName: [
          { required: true, message: '属性名称必填', trigger: 'blur' }
        ],
        attrValue: [
          { required: true, message: '属性值必填', trigger: 'blur' }
        ]
      }
    }
  },
  async created () {
    await this.getzidianlist()

    this.getshuxinlist(this.row.id)
  },
  async activated () {
    await this.getzidianlist()
    this.getshuxinlist(this.row.id)
  },
  methods: {
    async getzidianlist () {
      const res = await getzidianlistapi({ sortId: this.$store.state.row.id })
      this.tableDatas = res.data.list
      this.row = this.tableDatas[0]
    },
    async getshuxinlist (id) {
      const res = await getshuxinglistapi({ dictId: id })
      this.tableData = res.data.list
    },
    async handleCurrentChange (val) {
      this.getshuxinlist(val.id)
      this.row = val
    },
    async sure () {
      if (this.val) {
        await putzidianapi({ attrName: this.form.attrName, attrValue: this.form.attrValue, attrId: this.val.id })
        this.$message.success('修改成功')
      } else {
        await postzidianapi({ ...this.form, dictId: this.row.id })
        this.$message.success('添加成功')
      }
      this.getshuxinlist(this.row.id)
      this.dialogVisible = false
      this.form = {}
      this.val = null
    },
    colose () {
      this.dialogVisible = false
      this.form = {}
      this.val = null
    },
    putzidian (row) {
      //  putzidianapi
      this.val = row
      this.dialogVisible = true
      this.$set(this.form, 'attrCode', row.code)
      this.$set(this.form, 'attrName', row.name)
      this.$set(this.form, 'attrValue', row.value)
    // this.$set(this.form,'attrExplain',row.value)
    },
    async delzidian (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await delzidianapi({ attrId: row.id })
          this.dialogVisible = false
          this.getshuxinlist(this.row.id)
          this.$message.success('删除成功')
        } catch (error) {
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleCurrent (val) {
      this.val = val
    },
    async shangyi () {
      if (!this.val) {
        this.$message.warning('请先选择移动项')
      } else {
        if (this.val.id === this.tableData[0].id) {
          this.$message.warning('已经是第一项不可移动')
        } else {
          await getshangyiapi({ attrId: this.val.id })
          this.$message.success('上移成功')
          this.getshuxinlist(this.row.id)
        }
      }
    },
    async xiayi () {
      if (!this.val) {
        this.$message.warning('请先选择移动项')
      } else {
        if (this.val.id === this.tableData[this.tableData.length - 1].id) {
          this.$message.warning('已经是最后一项不可移动')
        } else {
          await getxiayiapi({ attrId: this.val.id })
          this.$message.success('下移成功')
          this.getshuxinlist(this.row.id)
        }
      }
    },
    search () {
      this.tableData = this.tableData.filter(ele => ele.name.indexOf(this.input) !== -1)
    },
    async searchs () {
      this.tableDatas = this.tableDatas.filter(ele => ele.name.indexOf(this.inputs) !== -1)
      const res = await getshuxinglistapi({ dictId: this.tableDatas[0]?.id })
      this.tableData = res.data.list
    }
  },
  watch: {
    tableDatas: {
      handler (val) {
        this.row.name = val[0].name
      }
    },
    deep: true,
    immediate: true,
    async inputs (val) {
      if (val === '') {
        const res = await getzidianlistapi({ sortId: this.$store.state.row.id })
        this.tableDatas = res.data.list
      }
    },
    async input (val) {
      if (val === '') {
        const res = await getshuxinglistapi({ dictId: this.row.id })
        this.tableData = res.data.list
      }
    }
  }
}
</script>

<style lang="less" scoped>
.zidian{
  font-size: 18px;
  font-weight: 900;
  display: flex;
  justify-content: space-between;
}
.shuxing{
  font-size: 18px;
  font-weight: 900;
}
.buttons{
  // margin-left: 35px !important;
  color: #fff !important;
  width: 63px;
  height: 32px;
  background-color: #1890ff !important;
  border: none;
  border-radius: 3px;
}
.new{
  background-color: #1890ff !important;
  color: #fff !important;
}
.button{
  width: 63px;
  height: 32px;
  border-radius: 3px;
  color: #333;
  border: 1px solid #ccc;
  background-color: #fff;
}
.goback{
  border-radius: 4px;
  border: none;
  background-color: skyblue;
  color: #fff;
  margin-right: 35px;
}
.zhong{
  display: flex;
  justify-content: space-between;
}
  .zhong span{
margin-left: 10px;
  }
  .span{
    display: inline-block;
    width: 300px;
    margin: 10px 0 5px -5px;
    // margin-right: 650px;
  }
  .rightbox{
    flex: 1;
    margin-left: 10px;
    // border: 1px solid #ccc;
    background-color: #fff;
    padding: 5px;
  }
  .bigbox{
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
  }
.liftbox{
  width: 300px;
  height: 880px;
  padding: 5px;
// border: 1px solid #ccc;
background-color: #fff;
}
.inputs{
  width: 300px;
  margin: 10px 0 5px 0;
}
.lifttable{
  height: 800px;
}
</style>
